<template>
  <div class="container">
    <!-- Vue 2 语法部分 -->
    <div class="students">
      <h2>学生信息 (Vue 2 语法)</h2>
      <ul>
        <li v-for="student in students" :key="student.id">
          <div>
            姓名：{{ student.name }} - 年龄：{{ student.age }}
            <span v-if="student.showPhone">- 电话：{{ student.phone }}</span>
          </div>
          <div class="button-group">
            <button @click="increaseAge(student)">年龄+1</button>
            <button @click="togglePhone(student)">
              {{ student.showPhone ? '隐藏电话' : '显示电话' }}
            </button>
          </div>
        </li>
      </ul>
    </div>

    <!-- Vue 3 语法部分 -->
    <div class="teachers">
      <h2>教师信息 (Vue 3 语法)</h2>
      <ul>
        <li v-for="teacher in teachers" :key="teacher.id">
          <div>
            姓名：{{ teacher.name }} - 工资：{{ teacher.salary }}
            <span v-if="teacher.showAge">- 年龄：{{ teacher.age }}</span>
          </div>
          <div class="button-group">
            <button @click="increaseSalary(teacher)">工资+100</button>
            <button @click="toggleAge(teacher)">
              {{ teacher.showAge ? '隐藏年龄' : '显示年龄' }}
            </button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// Vue 2 语法
export default {
  data() {
    return {
      students: [
        { id: 1, name: '张三', age: 18, phone: '13800138001', showPhone: false },
        { id: 2, name: '李四', age: 19, phone: '13800138002', showPhone: false },
        { id: 3, name: '王五', age: 20, phone: '13800138003', showPhone: false }
      ]
    }
  },
  methods: {
    increaseAge(student) {
      student.age += 1
    },
    togglePhone(student) {
      student.showPhone = !student.showPhone
    }
  }
}
</script>

<script setup>
// Vue 3 组合式 API
import { ref } from 'vue'

const teachers = ref([
  { id: 1, name: '刘老师', salary: 8000, age: 35, showAge: false },
  { id: 2, name: '陈老师', salary: 9000, age: 40, showAge: false },
  { id: 3, name: '周老师', salary: 10000, age: 45, showAge: false }
])

const increaseSalary = (teacher) => {
  teacher.salary += 100
}

const toggleAge = (teacher) => {
  teacher.showAge = !teacher.showAge
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.students, .teachers {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

h2 {
  color: #333;
  margin-bottom: 10px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin: 5px 0;
  padding: 5px;
  background-color: #f5f5f5;
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button-group {
  display: flex;
  gap: 8px;
}

button {
  padding: 4px 8px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

button:nth-child(2) {
  background-color: #2196F3;
}

button:nth-child(2):hover {
  background-color: #1976D2;
}
</style>
